<template>
	<view>
		<navbar :config="config" backColor="#000000"></navbar>
		<view class="select-top">
			<block v-for="(item , index) in selectCity" :key="index">
				<view class="reserve-item" @click.stop="selectProvince">
					<view class="reserve-lable">
						<text class="reserve-text" v-if="item.label">{{ item.label }}</text>
						<text class="reserve-hint" v-else-if="index == 0">--省--</text>
						<text class="reserve-hint" v-else-if="index == 1">--市--</text>
						<text class="reserve-hint" v-else-if="index == 2">--区/县--</text>
					</view>
					<view class="reserve-icon iconfont3">&#xe65c;</view>
				</view>
			</block>
		
		</view>
		<view class="card-box">
			<block v-for="item in lockList" :key="item.id">
				<view class="reserve-card">
					<text class="title">{{item.province_name}}-{{item.city_name}}-{{item.area_name}}</text>
					<text class="hint">很遗憾此城市区域已被锁定，请您选择其他城市</text>
					<text class="status">被锁定</text>
				</view>
			</block>
			<loadMore v-if="lockList.length>0" :status="status"></loadMore>
			<nodata v-else :config="{ top: 1, content: '暂无数据~' }"></nodata>
		</view>
		<u-select v-model="areaShow" mode="mutil-column-auto" :list="provincesList" @confirm="confirmSite"  confirmColor="#FF721B" cancelColor="#474747"></u-select>
	</view>
</template>

<script>
	import { applyareaagentPage } from "@/api/personal-center.js"
	// import selectSite from "./select.vue"
	export default {
		// components: {
		// 	selectSite
		// },
		data() {
			return {
				config: {
				
					
					title: '查看被锁定的区县',
					backgroundColor: [1, "#fff"],
					back: true, //false是tolbar页面 是则不写
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000"
					
				},
				areaShow: false,
				provincesList: [],
				selectCity: [{}, {}, {}],
				lockList:[],
				params: {
					page: 1,
					limit: 20
				},
				status: 'loading', //more|loading|noMore
			}
		},
		created() {
			// this.getCode()
		},
		onShow() {
			this.getAddressList();
			this.initialize();
		},
		onLoad() {
		},
		onReachBottom() {
			if(this.activeType === 2 && this.status !== 'loading' && this.status !== 'noMore'){
				this.params.page++
				this.getApplyareaagentPage()
			}
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.lockList = []
			this.getApplyareaagentPage()
		},
		methods: {
			initialize(){
				this.params.page = 1;
				this.lockList = [];
				this.getApplyareaagentPage();
			},
			getApplyareaagentPage(){
				let province_code = this.selectCity[0].value;
				let city_code = this.selectCity[1].value;
				let area_code = this.selectCity[2].value;
				let parms = `${province_code ? 'province_code=' + province_code + '&' :''}${city_code ? 'city_code=' + city_code + '&' :''}${area_code ? 'area_code=' + area_code + '&' :''}page=${this.params.page}&limit=${this.params.limit}&lock=1`;
				this.$http.get(`${applyareaagentPage}?${parms}`).then(res => {
					if (res && res.code == 200) {
						uni.stopPullDownRefresh()
						this.lockList = this.lockList.concat(res.page.list);
						if (res.page.totalPage <= res.page.currPage) {
							this.status = 'noMore'
						} else {
							this.status = 'more'
						}
					}
					
				})
			},
			// 
			// 区域代理
			lockPosition() {
				uni.navigateTo({
					url: '/pages/user/regional-agency/lock-position'
				})
			},
			confirmSite(e) {
				this.selectCity = e;
				this.initialize();
			},
			//获取地址列表
			async getAddressList() {
				let req = this.$http.get('/cnarea/tree-lbs', {});
				req.then(res => {
					console.log('getAddressList = ', res)
					this.provincesList = res.tree.children;
				})
			},
			selectProvince() {
				this.areaShow = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	// page{
	// 	background-color: #f5f5f5;
	// }
	.select-top {
		width: 100%;
		height: 136.5rpx;
		display: flex;
		align-items: center;
		padding: 30rpx 60rpx 0;
		// background-color: #fff;

		.reserve-item {
			flex: 1 0;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1rpx solid #d9d9d9;
		}
		.reserve-icon{
			flex-shrink: 0;
			font-size: 30rpx;
			color: #808080;
		}
	}
	.card-box{
		width: 100%;
		padding: 0 30rpx;
		.reserve-card{
			margin-top: 30rpx;
			padding: 40rpx 30rpx;
			// background-color: #fff;
			border-radius: 12rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			.title{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				// font-weight: 700;
				color: #474747;
			}
			.hint{
				margin-top: 15rpx;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				// font-weight: 400;
				color: #AAAAAA;
			}
			.status{
				position: absolute;
				right: 3%;
				top: 15%;
				padding: 11rpx 16rpx;
				// background: #e7eefc;
				border-radius: 0rpx 12rpx 0rpx 12rpx;
				font-size: 28rpx;
				// font-weight: 400;
				color: #FF211F;
			}
		}
	}
	/deep/.u-select__header__confirm{
		color: #FF211F !important;
	}
</style>
